<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>邀请返佣</title>
		<link rel="stylesheet" type="text/css" href="../css/header.css" />
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../css/invite.css" />
		<style type="text/css">
			.leftNav p:nth-child(5) a {
				color: #009AFE;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="porjectList">
				<div class="headerCon">
					<div class="header">
						<div class="logo">
							<a href="../index.html"><img src="../img/index/logo.png" /></a>
						</div>
						<ul class="nav">
							<li>
								<a href="">首页</a>
							</li>
							<li style="position: relative;" class="secNavPar">
								<a href="">热门文章</a>
								<div class="secNav">
									<p>赚钱教程</p>
									<p>圈内资讯</p>
									<p>项目推广</p>
								</div>
							</li>
							<li>
								<a href="">福利公社</a>
							</li>
							<li>
								<a href="">赚钱教程</a>
							</li>
							<li>
								<a href="">推客手册</a>
							</li>
						</ul>
						<div class="searchBtn"><img src="../img/index/search.png" class="search1" /><img src="../img/index/search_hover.png" class="search2" />搜索</div>
						<div class="user">
							<a href="login.html">登录</a>
							<a href="register.html" class="register">注册</a>
							<!--<img src="../img/index/user.png" class="userImg"/>-->
							<div class="userInfo">
								<span class="icons"></span>
								<p class="name">腿长一米八</p>
								<div class="incon">
									<p>我的任务</p>
									<p>我的收藏 <span style="color: #f00;"> (3)</span></p>
									<p>我的任务</p>
								</div>
								<p class="logout">退出登录</p>
							</div>
						</div>
						<div class="searchCon">
							<div class="search">
								<input type="text" />
								<span>搜索</span>
							</div>
							<div class="closeImg">
								<img src="../img/index/close.png" class="img1" />
								<img src="../img/index/close_hover.png" class="img2" //>
							</div>
						</div>
					</div>
				</div>
				<div class="navTitle"></div>
				<div class="container">
					<div class="lefts">
						<div class="headImg">
							<img src="../img/index/st93.png" />
							<p class="name">腿长一米八</p>
						</div>
						<div class="leftNav">
							<p>
								<a href="userInfo.html">个人资料</a>
							</p>
							<p>
								<a href="task.html">我的任务</a>
							</p>
							<p>
								<a href="userInfo.html">我的收藏 <span>(2)</span></a>
							</p>
							<p>
								<a href="userInfo.html">收益中心</a>
							</p>
							<p>
								<a href="userInfo.html">邀请返佣</a>
							</p>
							<p>
								<a href="userInfo.html">账户安全</a>
							</p>
							<p>退出登录</p>
						</div>
					</div>
					<div class="content">
						<div class="banner">

						</div>
						<div class="InviteType">
							<p class="title">我的分享方式</p>
							<div class="typeList">
								<div>
									<p>专属二维码</p>
									<p @click="showCodeImg">点击查看专属二维码</p>
								</div>
								<div>
									<p>专属邀请码</p>
									<p>QWER1234 <span class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">复制邀请码</span></p>
								</div>
								<div>
									<p>专属邀请链接</p>
									<p>https://www.tuikestar.com/topic/invited/?invite_ <span class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">复制邀请链接</span></p>
								</div>
							</div>
						</div>
						<ul class="datas">
							<li>
								<p>今日收徒返佣(元）</p>
								<p>66.00</p>
								<li>
									<p>累计收徒返佣（元）</p>
									<p>66.00</p>
								</li>
								<li>
									<p>有效徒弟（人）</p>
									<p>6/10</p>
								</li>
								<li>
									<p>当前返点</p>
									<p>6%</p>
								</li>
						</ul>
						<div class="list">
							<p class="title">
								<span :class="{active:activeNum==0}" @click="changNum(0)">收徒记录</span>
								<span :class="{active:activeNum==1}" @click="changNum(1)">返佣记录</span></p>
							<div class="_list" v-if="activeNum==0">
								<ul>
									<li>徒弟账号</li>
									<li>收徒时间</li>
									<li>累计返佣</li>
								</ul>
								<ul class="uls">
									<li>156****3333</li>
									<li>2018-09-30 12:00:00</li>
									<li>￥5.0</li>
								</ul>
								<ul class="uls">
									<li>156****3333</li>
									<li>2018-09-30 12:00:00</li>
									<li>￥5.0</li>
								</ul>
								<ul class="uls">
									<li>156****3333</li>
									<li>2018-09-30 12:00:00</li>
									<li>￥5.0</li>
								</ul>
							</div>
							<div class="_list _list2" v-if="activeNum==1">
								<ul>
									<li>徒弟账号</li>
									<li>返点</li>
									<li>返佣时间</li>
									<li>返佣</li>
								</ul>
								<ul class="uls2">
									<li>156****3333</li>
									<li>10%</li>
									<li>2018-09-30 12:00:00</li>
									<li>￥5.0</li>
								</ul>
								<ul class="uls2">
									<li>156****3333</li>
									<li>10%</li>
									<li>2018-09-30 12:00:00</li>
									<li>￥5.0</li>
								</ul>
								<ul class="uls2">
									<li>156****3333</li>
									<li>10%</li>
									<li>2018-09-30 12:00:00</li>
									<li>￥5.0</li>
								</ul>
							</div>
						</div>
						<div class="rule">
							<p class="title">活动规则</p>
							<div class="_con">
								<p>1、推客星球用户（师傅）邀请好友成为推客（徒弟）成功完成任务可得返佣，返佣金额等于徒弟60天内（含收徒当日）完成任务所得收入的一定比例，徒弟自身收入不受影响。徒弟完成单个任务师傅所得返佣 = 徒弟完成单个任务所得收入 * 当前阶梯返点</p>
								<p class="p5">不同数量有效徒弟对应的阶梯返点如下：</p>
								<table>
									<tr>
										<td>有效徒弟</td>
										<td>1-10人</td>
										<td>11-20人</td>
										<td>21-30人</td>
										<td>31人及以上</td>
									</tr>
									<tr>
										<td>阶梯返点</td>
										<td>5%</td>
										<td>8%</td>
										<td>10%</td>
										<td>12%</td>
									</tr>
								</table>
								<p>2、有效徒弟定义：指师傅所收的徒弟于收徒之日起60天内成功完成了一个任务；</p>
								<p>3、徒弟成功完成任务定义：指徒弟提交材料，并通过平台审核，获得了返现；</p>
								<p>4、阶梯返点定义：指的是根据被邀请者名下有效徒弟数量确定的返现比例，有效徒弟越多，阶梯返点越高</p>
								<p class="p6">其它条款：</p>
								<p>1、遵守推客星球的各项规则制度，通过不正当手段获得的奖励，推客星球有权撤销并永久封号；</p>
								<p>2、收徒返佣活动如有调整，以推客星球平台更新为准，最终解释权归推客星球所有；</p>
							</div>
						</div>
					</div>
				</div>

			</div>
			<div class="footer">
				<div class="footerCon">
					<div class="left">
						<p class="tit">关于</p>
						<div class="info">
							推客星球（www.tuikestar.com）是一个帮您赚钱、省钱的社会化推广服务平台，以第三方身份整合全网优质赚钱项目、优惠福利信息。推客达人利用自己的碎片化时间，完成平台的推广任务，获得一定报酬的同时，还可了解每个项目的最新福利活动及赚钱攻略，也满足了项目方的产品推广需求。
						</div>
					</div>
					<div class="middle">
						<p class="tit">联系我们</p>
						<p class="p1">友链交换：tuikestar@162.com</p>
						<p class="p1">联合推广：tuikestar@162.com</p>
						<p class="p1">咨询QQ：547855740</p>
						<p class="p1">微信公众号：tuikestar2018</p>
						<div class="codes">
							<img src="../img/index/st93.png" />
							<p>微信扫一扫，关注我们</p>
						</div>
					</div>
					<div class="right">
						<p class="tit">合作伙伴</p>
						<div class="imgs">
							<img src="../img/index/st93.png" />
							<img src="../img/index/st93.png" />
							<img src="../img/index/st93.png" />
							<img src="../img/index/st93.png" />
							<img src="../img/index/st93.png" />
							<img src="../img/index/st93.png" />

						</div>
					</div>
				</div>
				<div class="footer_info">©2010-2018 - 推客星球 - 黔ICP备14037330号-1</div>
			</div>
			<div class="pop" v-show="showImg">
				<div class="popCon">
					<p class="title">保存到桌面，发给好友<img src="../img/icon/close.png" @click="hideCodeImg" /></p>
					<div class="_popcon">
						<img src="../img/index/st93.png" />
						<p @click="downs">保存到桌面</p>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="../js/headerCommon.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			var clipboard = new ClipboardJS('.btn');

			clipboard.on('success', function(e) {
				alert("复制成功")
				e.clearSelection();
			});

			clipboard.on('error', function(e) {
				alert("复制失败")
			});
		});
		new Vue({
			el: '#app',
			data: {
				showImg: false,
				activeNum: 0
			},
			methods: {
				changNum(num){
					this.activeNum=num;
				},
				showCodeImg() {
					this.showImg = true
				},
				hideCodeImg() {
					this.showImg = false
				},
				//保存图片
				downloadIamge(imgsrc, name) { //下载图片地址和图片名
					var image = new Image();
					// 解决跨域 Canvas 污染问题
					image.setAttribute("crossOrigin", "anonymous");
					image.onload = function() {
						var canvas = document.createElement("canvas");
						canvas.width = image.width;
						canvas.height = image.height;
						var context = canvas.getContext("2d");
						context.drawImage(image, 0, 0, image.width, image.height);
						var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
						var a = document.createElement("a"); // 生成一个a元素
						var event = new MouseEvent("click"); // 创建一个单击事件
						a.download = name || "photo"; // 设置图片名称
						a.href = url; // 将生成的URL设置为a.href属性
						a.dispatchEvent(event); // 触发a的单击事件
					};
					image.src = imgsrc;
					this.hideCodeImg()
				},
				downs() {
					this.downloadIamge("http://static.ydcss.com/uploads/ydui/1.jpg", 'pic')
				}
			}
		});
	</script>

</html>